@font-face {
	font-family: 'xjlfont';
	src: url('./XJLFONT.FONT');
}

html, body, canvas {
	margin: 0px;
	padding: 0px;
	border: none;
	font-family: '微软雅黑';
}

body {
	background-color: #000;
	font-size: 16px;
}

a {
	text-decoration: none;
}

img {
	width: 100%;
}

.hide{
	display: none;
}
.animate{
	display: block;
}

input[type='text'], input[type='number'] {
	border: 0;
	outline: none;
}

.page {
	position: absolute;
	width: 100%;
	height: 100%;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	overflow: hidden;
}

#canvas {
	position: absolute;
}

.slidedown {
	-webkit-animation: slidedown 1s;
}
.slideup {
	-webkit-animation: slideup 1s;
}
.flipdown {
	-webkit-animation: turnoverY 1s;
	-webkit-transform-origin: 50% 0;
}
.flipup {
	-webkit-animation: turnoverY 1s;
	-webkit-transform-origin: 50% 100%;
}

.slideright {
	-webkit-animation: slideright 0.6s;
}
.slideleft {
	-webkit-animation: slideleft 0.6s;
}
.flipright {
	-webkit-animation: turnoverX 0.6s;
	-webkit-transform-origin: 0 50%;
}
.flipleft {
	-webkit-animation: turnoverX 0.6s;
	-webkit-transform-origin: 100% 50%;
}

@-webkit-keyframes slidedown {
    0% {
        -webkit-transform: translateY(0);
    }
    100% {
        -webkit-transform: translateY(100%);
    }
}
@-webkit-keyframes slideup {
    0% {
        -webkit-transform: translateY(0);
    }
    100% {
        -webkit-transform: translateY(-100%);
    }
}
@-webkit-keyframes turnoverY {
    0% {
        -webkit-transform: scaleY(0);
    }
    100% {
        -webkit-transform: scaleY(1);
    }
}
@-webkit-keyframes slideright {
    0% {
        -webkit-transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(100%);
    }
}
@-webkit-keyframes slideleft {
    0% {
        -webkit-transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(-100%);
    }
}
@-webkit-keyframes turnoverX {
    0% {
        -webkit-transform: scaleX(0);
    }
    100% {
        -webkit-transform: scaleX(1);
    }
}

.bg-word {
	position: absolute;
	background-color: rgba(132, 97, 64, 0.5);
}
.word {
	position: absolute;
}
.photo {
	position: absolute;
	-webkit-transform-origin: 0 0;
}
#page_index {
	background-image: url(../img/bg_index.jpg);
}
#page_child {
	background-image: url(../img/bg_child.jpg);
	-webkit-transform-style: preserve-3d;
}
	#bg_word_child {
		width: 34.2%;
		height: 100%;
		top: 0;
		right: 4.2%;
	}
	#bg_word_child.animate {
		-webkit-animation: bg_word 0.5s;
	}
	@-webkit-keyframes bg_word {
		0% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}
	#word_child_1 {
		width: 6.1%;
		top: 6.6%;
		left: 86.8%;
	}
	#word_child_2 {
		width: 6.1%;
		top: 6.6%;
		left: 76.9%;
	}
	#word_child_3 {
		width: 7.9%;
		top: 6.6%;
		left: 64.6%;
	}
	#word_child_1.animate, #word_child_2.animate, #word_child_3.animate {
		-webkit-animation: word_child 0.5s;
	}
	@-webkit-keyframes word_child {
		0% {
			-webkit-transform: translateY(-20px);
			opacity: 0;
		}
		100% {
			-webkit-transform: translateY(0);
			opacity: 1;
		}
	}
	#page_child .calender {
		position: absolute;
		width: 40%;
		right: 4.2%;
		bottom: 1.6%;
	}
	#calender_2014.animate {
		-webkit-animation: 'calender_2014' 1.5s;
		-webkit-transform-origin: 50% 5%;
	}
	@-webkit-keyframes 'calender_2014' {
		0% {
			-webkit-transform: rotateX(0);
			opacity: 0;
		}
		50% {
			-webkit-transform: rotateX(0);
			opacity: 1;
		}
		100% {
			-webkit-transform: perspective(500px) rotateX(90deg);
		}
	}
	#calender_2015.animate {
		-webkit-animation: 'calender_2015' 1s;
	}
	@-webkit-keyframes 'calender_2015' {
		0% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}

#page_adult {
	background-image: url(../img/bg_adult.jpg);
}
	#bg_word_adult {
		width: 85.7%;
		height: 16.9%;
		top: 74.7%;
		right: 0;
	}
	#bg_word_adult.animate {
		-webkit-animation: bg_word 0.5s;
	}
	#word_adult_1 {
		width: 61.6%;
		top: 77%;
		left: 18.1%;
	}
	#word_adult_2 {
		width: 77.8%;
		top: 83.3%;
		left: 18.1%;
	}
	#word_adult_1.animate, #word_adult_2.animate {
		-webkit-animation: word_adult 0.5s;
	}
	@-webkit-keyframes word_adult {
		0% {
			-webkit-transform: translateX(-20px);
			opacity: 0;
		}
		100% {
			-webkit-transform: translateX(0);
			opacity: 1;
		}
	}
#page_oldman {
	background-image: url(../img/bg_oldman.jpg);
}
	#bg_word_oldman {
		width: 100%;
		height: 28.4%;
		bottom: 0;
		right: 0;
	}
	#bg_word_oldman.animate {
		-webkit-animation: bg_word 0.5s;
	}
	#word_oldman {
		width: 83.4%;
		top: 73.5%;
		left: 4.2%;
	}
	#word_oldman.animate {
		-webkit-animation: word_oldman 0.5s;
	}
	@-webkit-keyframes word_oldman {
		0% {
			-webkit-transform: translateY(-20px);
			opacity: 0;
		}
		100% {
			-webkit-transform: translateY(0);
			opacity: 1;
		}
	}
	#photo1 {
		left: 2.8%;
		top: 22.1%;
		width: 33.9%;
		-webkit-transform: rotate(-32.7deg);
	}
	#photo1.animate {
		-webkit-animation: 'photo1' 0.7s;
	}
	@-webkit-keyframes 'photo1' {
		0% {
			-webkit-transform: translate(-100px, 0) rotate(-180deg);
		}
		100% {
			-webkit-transform: translate(0, 0) rotate(-32.7deg);
		}
	}
	#photo2 {
		left: 22.8%;
		top: 8.8%;
		width: 22.2%;
		-webkit-transform: rotate(-13.3deg);
	}
	#photo2.animate {
		-webkit-animation: 'photo2' 0.7s;
	}
	@-webkit-keyframes 'photo2' {
		0% {
			-webkit-transform: translate(0, -200px) rotate(-180deg);
		}
		100% {
			-webkit-transform: translate(0, 0) rotate(-13.3deg);
		}
	}
	#photo3 {
		left: 45.4%;
		top: 9.3%;
		width: 33.6%;
		-webkit-transform: rotate(2deg);
	}
	#photo3.animate {
		-webkit-animation: 'photo3' 0.7s;
	}
	@-webkit-keyframes 'photo3' {
		0% {
			-webkit-transform: translate(400px, -200px) rotate(90deg);
		}
		100% {
			-webkit-transform: translate(0, 0) rotate(2deg);
		}
	}
	#photo4 {
		left: 68.1%;
		top: 16.2%;
		width: 33.6%;
		-webkit-transform: rotate(28.6deg);
	}
	#photo4.animate {
		-webkit-animation: 'photo4' 0.7s;
	}
	@-webkit-keyframes 'photo4' {
		0% {
			-webkit-transform: translate(300px, 100px) rotate(90deg);
		}
		100% {
			-webkit-transform: translate(0, 0) rotate(28.6deg);
		}
	}
	#photo5 {
		left: 83.6%;
		top: 28.1%;
		width: 22.8%;
		-webkit-transform: rotate(36deg);
	}
	#photo5.animate {
		-webkit-animation: 'photo5' 0.7s;
	}
	@-webkit-keyframes 'photo5' {
		0% {
			-webkit-transform: translate(200px, 200px) rotate(-90deg);
		}
		100% {
			-webkit-transform: translate(0, 0) rotate(36deg);
		}
	}
	#photo6 {
		left: 40%;
		top: 31.5%;
		width: 33.6%;
		-webkit-transform: rotate(8.8deg);
	}
	#photo6.animate {
		-webkit-animation: 'photo6' 0.7s;
	}
	@-webkit-keyframes 'photo6' {
		0% {
			-webkit-transform: translate(300px, 200px) rotate(-90deg);
		}
		100% {
			-webkit-transform: translate(0, 0) rotate(8.8deg);
		}
	}
	#photo7 {
		left: 2.1%;
		top: 37.9%;
		width: 33.6%;
		-webkit-transform: rotate(-18.2deg);
	}
	#photo7.animate {
		-webkit-animation: 'photo7' 0.7s;
	}
	@-webkit-keyframes 'photo7' {
		0% {
			-webkit-transform: translate(-200px, 200px) rotate(-90deg);
		}
		100% {
			-webkit-transform: translate(0, 0) rotate(-18.2deg);
		}
	}

#page_share {
	background-image: url(../img/bg_share.jpg);
	overflow: auto;
}
	#share_box {
		padding: 0 6%;
		width: 100%;
		padding-top: 5px;
		box-sizing: border-box;
	}
		#share_letter{
			width: 100%;
			margin-top: 100%;
			background: url(../img/share_letter.jpg) repeat-y;
			background-size: 100%;
			box-shadow: 0 0 3px #000;
		}
			#share_word {
				width: 66.5%;
				padding: 0.5em 0;
				margin: auto;
				display: block;
			}
			#share_upload {
				width: 100%;
				margin: auto;
				display: block;
				padding: 0 3%;
				box-sizing: border-box;
				max-width: 100%;
			}
			#share_input_outer {
				padding: 1em;
				width: 100%;
				box-sizing: border-box;
			}
				#share_input_inner {
					position: relative;
				}
					#share_input_line .line {
						height: 1.5em;
						border-bottom: 1px solid #c9c3bd;
						box-sizing: border-box;
					}
					#share_input {
						position: absolute;
						height: 100%;
						width: 100%;
						top: 0;
						left: 0;
						font-size: 1em;
						line-height: 1.5em;
					}
						#share_input_area {
							font-family: 'xjlfont';
							background-color: transparent;
							border: 0;
							width: 100%;
							height: 100%;
							font-size: 1em;
							line-height: 1.5em;
						}

	.share-fg {
		position: fixed;
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
	#share_top {
		top: 0;
		left: 0;
		width: 100%;
		height: 15.5%;
		background-image: url(../img/share_top.png);
	}
	#share_left {
		top: 15.5%;
		left: 0;
		width: 3.75%;
		height: 58%;
		background-image: url(../img/share_left.png);
	}
	#share_right {
		top: 15.5%;
		right: 0;
		width: 3.75%;
		height: 58%;
		background-image: url(../img/share_right.png);
	}
	#share_bottom {
		bottom: 0;
		left: 0;
		width: 100%;
		height: 26.5%;
		background-image: url(../img/share_bottom.png);
	}
	#share_flower_left {
		left: 0;
		top: 13.2%;
		width: 13.9%;
		height: 14.3%;
		background-image: url(../img/share_flower_left.png);
	}
	#share_flower_right {
		right: 0;
		top: 13.2%;
		width: 14.6%;
		height: 15.7%;
		background-image: url(../img/share_flower_right.png);
	}
	#share_btn {
		position: fixed;
		width: 54.4%;
		left: 22.8%;
		top: 75.5%;
	}
	#btn_generate {
		position: fixed;
		width: 54.4%;
		left: 22.8%;
		top: 75.5%;
	}
	#btn_make {
		position: fixed;
		width: 54.4%;
		left: 22.8%;
		top: 75.5%;
	}
	#share_words {
		margin: 0;
		padding: 0;
		font-size: 1em;
		line-height: 1.5em;
	}
	#share_img{
		max-height: 30%;
		padding: 0 3%;
		max-width: 100%;
		box-sizing: border-box;
		margin: auto;
		display: block;
		width: auto;
		max-width: 100%;
	}

#share_mask {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 1000;
	background: url(../img/share_mask.png) no-repeat;
	background-size: 100% 100%;
}
	#close_share_mask {
		position: absolute;
		width: 58%;
		top: 63.5%;
		left: 20.8%;
	}

#arrow_right {
	position: fixed;
	top: 47.5%;
	right: 0;
	height: 5%;
	width: auto;
	z-index: 100;
	-webkit-animation: arrow_right 1.5s infinite;
}
@-webkit-keyframes arrow_right {
	0% {
		-webkit-transform: translateX(-20px);
		opacity: 0;
	}
	50% {
		-webkit-transform: translateX(-10px);
		opacity: 1;
	}
	100% {
		-webkit-transform: translateX(0);
		opacity: 0;
	}
}

#music_control {
	position: fixed;
	top: 3%;
	right: 5%;
	width: 20px;
	height: 20px;
	z-index: 100;
	background-size: 100% 100%;
}
#music_control.play {
	background-image: url(../img/music_play.png);
}
#music_control.pause {
	background-image: url(../img/music_pause.png);
}

#loading {
	position: absolute;
	top: 45%;
	left: 45%;
	width: 10%;
}
